<script lang="ts" setup>
import { ref, reactive } from 'vue'
const bgImg = "https://shq.qdjqy.cn/profile/0911/coupon/bg.png"

definePage({
  style: {
    navigationStyle: 'custom'
  },
})

function handleClickLeft() {
  uni.navigateBack({
    delta: 1
  })
}

const tab = ref<number>(0)
const tabsWithBadge = ref([
  { title: '未使用' },
  { title: '已使用' },
  { title: '已过期' }
])

function handleChange(event: any) {
  tab.value = event.index;
}

interface Coupon {
  id: number,
  price: string,
  staus: string,
  name: string,
  startTime: string,
  endTime: string
}

const couponList = reactive<Coupon[]>([
  { id: 1, price: '100', staus: 'normal', name: '无门槛', startTime: '2020.08.05', endTime: '2075.08.05' },
  { id: 2, price: '50', staus: 'past', name: '箱包品类', startTime: '2020.08.05', endTime: '2025.08.05' },
  { id: 3, price: '20', staus: 'used', name: '服饰类', startTime: '2020.08.05', endTime: '2036.08.05' },
  { id: 4, price: '200', staus: 'normal', name: '电子数码类', startTime: '2020.08.05', endTime: '20275.08.05' },
  { id: 5, price: '100', staus: 'past', name: '无门槛', startTime: '2020.08.05', endTime: '20225.08.05' },
  { id: 6, price: '80', staus: 'used', name: '无门槛', startTime: '2020.08.05', endTime: '20265.08.05' },
])

const couponNormal = computed(() => {
  return (statu:string) => {
    return (statu === 'normal' && tab.value === 0)
  }
})

const couponUsed = computed(() => {
  return (statu:string) => {
    return (statu === 'used' && tab.value === 1)
  }
})

const couponPast = computed(() => {
  return (statu:string) => {
    return (statu === 'past' && tab.value === 2)
  }
})
</script>

<template>
  <view class="scan-container">
    <wd-navbar left-text="我的卡券" left-arrow @click-left="handleClickLeft" 
      custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>

    <wd-tabs v-model="tab" @change="handleChange">
      <wd-tab v-for="(item, index) in tabsWithBadge" :key="index" :title="`${item.title}`">
        <view class="coupon-content" v-for="(item, index) in couponList" :key="index">
          <view class="flex li" v-if="couponNormal(item['staus'])">
            <image class="bgImage" :src="bgImg" mode="aspectFit"></image>
            <view class="price">
              <span class="one">￥</span>
              <span class="two">100</span>
            </view>
            <view class="content">
              <view class="name">代金券红包名称</view>
              <view class="con">使用规则使用规则使用规则使 用规则</view>
              <view class="time">2025.08.06-2026.08.06</view>
            </view>
            <view class="btn">
              <wd-button plain type="error" size="small">待使用</wd-button>
            </view>
          </view>
          <view class="flex li" v-if="couponUsed(item['staus'])">
            <image class="bgImage op-past" :src="bgImg"></image>
            <view class="price">
              <span class="one">￥</span>
              <span class="two">50</span>
            </view>
            <view class="content">
              <view class="name color-a">代金券红包名称</view>
              <view class="con">使用规则使用规则使用规则使 用规则</view>
              <view class="time">2025.08.06-2026.08.06</view>
            </view>
            <view class="btn">
              <wd-button plain type="info" size="small">已使用</wd-button>
            </view>
          </view>
          <view class="flex li" v-if="couponPast(item['staus'])">
            <image class="bgImage op-past" :src="bgImg"></image>
            <view class="price">
              <span class="one">￥</span>
              <span class="two">30</span>
            </view>
            <view class="content">
              <view class="name color-a">代金券红包名称</view>
              <view class="con">使用规则使用规则使用规则使 用规则</view>
              <view class="time">2025.08.06-2026.08.06</view>
            </view>
            <view class="btn">
              <wd-button plain type="info" size="small">已过期</wd-button>
            </view>
          </view>
        </view>
      </wd-tab>
    </wd-tabs>
    
  </view>
</template>

<style lang="scss" scoped>
.coupon-content {
  width: 750rpx;

  & .li {
    width: 690rpx;
    height: 190rpx;
    margin: 20rpx 30rpx;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    & .bgImage {
      width: 690rpx;
      height: 190rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    & .op-past {
      opacity: 0.3;
    }
    & .price {
      position: relative;
      top: 0;
      left: 0;
      z-index: 2;
      color: #fff;
      line-height: 190rpx;
      text-align: center;
      // border: 1px solid #000;
      width: 190rpx;
      & .one {
        font-size: 32rpx;
      }
      & .two {
        font-size: 60rpx;
      }
    }
    & .btn {
      position: absolute;
      top: 70rpx;
      right: 0;
      z-index: 2;
      text-align: center;
      width: 180rpx;
    }
    & .content {
      position: absolute;
      top: 0;
      left: 190rpx;
      z-index: 2;
      width: 310rpx;
      height: 190rpx;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      & .name{
        margin-top: 10rpx;
        font-size: 30rpx;
        font-weight: 600;
        line-height: 40rpx;
      }
      & .con{
        margin-top: 10rpx;
        font-size: 26rpx;
        line-height: 30rpx;
        color: #aaa;
      }
      & .time{
        margin-top: 10rpx;
        font-size: 22rpx;
        line-height: 40rpx;
        color: #aaa;
      }
    }
  }
}
.color-a {
  color: #aaa;
}
</style>
